// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { GroupBox, ComboBox, VerticalBox, GroupBox, GridBox, Palette, TextEdit, Button, Switch, ScrollView, StyleMetrics } from "std-widgets.slint";
import { NavigationListView, NavigationListViewItem, Container, ExtendedLineEdit, Icon, CardListView, CardListViewItem, IconButton, TitleText } from "../widgets.slint";
import { ModalDialog } from "../widgets.slint";
import { Icons } from "../assets.slint";
import { UsecasesPalette } from "../widgets/styling.slint";
import { DialogGlobal } from "../widgets/dialog.slint";

export global MailViewAdapter { }

export global MailSideBarViewAdapter {
    out property <[string]> accounts: ["jon.doe@slint.dev", "jon.doe@my-mail.com", "jon.doe@gmail.com"];

    out property <[NavigationListViewItem]> boxes: [
        { text: @tr("Inbox"), message: "128", icon: Icons.inbox },
        { text: @tr("Drafts"), message: "9", icon: Icons.document },
        { text: @tr("Sent"), icon: Icons.send },
        {
            text: @tr("Junk"),
            icon: Icons.junk,
            message: "23",
        },
        { text: @tr("Trash"), icon: Icons.trash },
        { text: @tr("Archive"), icon: Icons.archive }
    ];

    out property <[NavigationListViewItem]> custom-boxes: [
        { text: @tr("Social"), message: "3972", icon: Icons.useres },
        { text: @tr("Updates"), message: "342", icon: Icons.updates },
        { text: @tr("Forums"), message: "128", icon: Icons.message }
    ];
    in-out property <int> current-box;
    in-out property <int> current-custom-box: -1;

    public pure function current-title() -> string {
        if current-box > -1 && current-box < boxes.length {
            return boxes[current-box].text;
        }
        if current-custom-box > -1 && current-custom-box < custom-boxes.length {
            return custom-boxes[current-custom-box].text;
        }
        ""
    }
}

export component MailContainer inherits Container {
    background: UsecasesPalette.use-material ? Palette.alternate-background : Palette.control-background;
    border-color: UsecasesPalette.use-material ? Palette.border : transparent;
}

export component MailSideBarView {
    in property <bool> break-layout;

    horizontal-stretch: 0;
    min-width: 200px;

    VerticalLayout {
        spacing: 4px;

        if !root.break-layout : ComboBox {
            model: MailSideBarViewAdapter.accounts;
        }

        Container {
            border-radius: UsecasesPalette.use-material ? 0 : 4px;

            NavigationListView {
                model: MailSideBarViewAdapter.boxes;
                current-item <=> MailSideBarViewAdapter.current-box;
                min-height: 248px;
                vertical-stretch: 0;

                selected(index) => {
                    MailSideBarViewAdapter.current-custom-box = -1;
                }
            }

            Rectangle {
                background: Palette.border;
                height: 1px;
            }

            NavigationListView {
                model: MailSideBarViewAdapter.custom-boxes;
                current-item <=> MailSideBarViewAdapter.current-custom-box;

                selected(index) => {
                    MailSideBarViewAdapter.current-box = -1;
                }
            }
        }
    }
}

export component MailSideBarDialog inherits ModalDialog {
    in property <length> sidebar-x;
    in property <length> sidebar-y;
    in property <length> sidebar-height;

    Rectangle {
        x: root.sidebar-x - self.width;
        y: root.sidebar-y;
        width: 246px;
        height: root.sidebar-height;
        background: Palette.control-background;

        HorizontalLayout {
            padding: UsecasesPalette.use-material ? 0 : 4px;

            side-bar := MailSideBarView {
                width: 360px;
                break-layout: true;
            }
        }

        animate x {
            duration: 250ms;
            easing: cubic-bezier(0, 0, 0, 1);
        }

        init => {
            self.x = root.sidebar-x;
        }
    }
}

export global MailBoxViewAdapter {
    callback search-text-changed(search-text: string);

    in property <string> title: MailSideBarViewAdapter.current-title();
    in property <[CardListViewItem]> mails: [
        {
            title: "Simon Hausmann",
            note: "1 hour ago",
            sub-title: "Meeting tomorrow",
            caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        },
        { title: "Tobias Hunger", note: "1 day ago", sub-title: "Meeting tomorrow",  caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." },
        {
            title: "Olivier Goffart",
            note: "2 hour ago",
            sub-title: "Meeting tomorrow",
            caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        },
        {
            title: "Aurindam Jana",
            note: "5 hour ago",
            sub-title: "Meeting tomorrow",
            caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        },
        {
            title: "Simon Hausmann",
            note: "7 hour ago",
            sub-title: "Meeting tomorrow",
            caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        },
        { title: "Tobias Hunger", note: "1 day ago", sub-title: "Meeting tomorrow",  caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." },
        {
            title: "Olivier Goffart",
            note: "8 hour ago",
            sub-title: "Meeting tomorrow",
            caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        },
        {
            title: "Aurindam Jana",
            note: "9 hour ago",
            sub-title: "Meeting tomorrow",
            caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        },
    ];
}

export component MailBoxView {
    in property <bool> break-layout;

    callback show-sidebar();

    horizontal-stretch: 1;

    VerticalLayout {
        spacing: 4px;

        HorizontalLayout {
            spacing: 8px;

            if root.break-layout : IconButton {
                icon: Icons.menu;

                clicked => {
                    root.show-sidebar();
                }
            }

            TitleText {
                text: MailBoxViewAdapter.title;
                min-height: 32px;
            }
        }

        MailContainer {
            VerticalLayout {
                spacing: 8px;

                ExtendedLineEdit {
                    vertical-stretch: 0;
                    placeholder-text: "Search by Sender";

                    Icon {
                        source: Icons.search;
                    }

                    edited => {
                        MailBoxViewAdapter.search-text-changed(self.text);
                    }
                }

                CardListView {
                    model: MailBoxViewAdapter.mails;
                }
            }
        }
    }
}

export global MailMessageViewAdapter {
    callback move-to-archive();
    callback move-to-junk();
    callback move-to-trash();
    callback reply();
    callback forward();
    callback send();

    in property <string> message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
    in-out property <bool> mute-this-thread: false;
}

export component MailMessageView {
    horizontal-stretch: 1;

    MailContainer {
        HorizontalLayout {
            spacing: 8px;

            IconButton {
                icon: Icons.archive;

                clicked => {
                    MailMessageViewAdapter.move-to-archive();
                }
            }

            IconButton {
                icon: Icons.junk;

                clicked => {
                    MailMessageViewAdapter.move-to-junk();
                }
            }

            IconButton {
                icon: Icons.trash;

                clicked => {
                    MailMessageViewAdapter.move-to-trash();
                }
            }

            Rectangle {}

            IconButton {
                icon: Icons.reply;

                clicked => {
                    MailMessageViewAdapter.reply();
                }
            }

            IconButton {
                icon: Icons.forward;

                clicked => {
                    MailMessageViewAdapter.forward();
                }
            }
        }

        VerticalLayout {
            spacing: 4px;

            text-edit := TextEdit {
                min-height: 52px;
                max-height: 94px;
                wrap: word-wrap;
            }

            ScrollView {
                VerticalLayout {
                    x: 0;
                    y: 0;

                    mail-text := Text {
                        vertical-alignment: top;
                        font-size: 14px;
                        font-weight: 400;
                        color: Palette.foreground;
                        text: MailMessageViewAdapter.message;
                        wrap: word-wrap;
                    }
                }
            }

            HorizontalLayout {
                Switch {
                    text: @tr("Mute this thread");
                    checked <=> MailMessageViewAdapter.mute-this-thread;
                }

                Button {
                    text: @tr("Send");
                    primary: true;
                    enabled: text-edit.text != "";

                    clicked => {
                        MailMessageViewAdapter.send();
                    }
                }
            }
        }
    }
}

export component MailView {
    in property <bool> break-layout;

    HorizontalLayout {
        spacing: 16px;

        if !root.break-layout: MailSideBarView { }

        VerticalLayout {
            spacing: 16px;

            MailBoxView {
                break-layout: root.break-layout;

                show-sidebar => {
                    sidebar-dialog.show();
                }
            }

            MailMessageView { }
        }
    }

    sidebar-dialog := MailSideBarDialog {
        sidebar-x: 0;
        sidebar-y: root.absolute-position.y;
        sidebar-height: DialogGlobal.window-height - root.absolute-position.y;
    }
}
